import React, { useState } from 'react';
import { 
  TextField, 
  Button, 
  Typography, 
  Container, 
  Paper,
  MenuItem,
  IconButton,
  Box,
  CircularProgress
} from '@mui/material';
import { ArrowBack, CloudUpload } from '@material-ui/icons';
import { useNavigate } from 'react-router-dom';
import { businessService } from '../../services/businessService';
import './businessRegister.css';

export default function BusinessRegister() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    // Store Information
    storeName: '',
    storeType: '',
    storePhone: '',
    storeAddress: '',
    businessHours: '',
    storeImage: null,
    // Applicant Information
    applicantName: '',
    applicantEmail: ''
  });

  const storeTypes = [
    'Bar',
    'Restaurant',
    'Cafe',
    'Club',
    'Entertainment Venue',
    'Other'
  ];

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setFormData(prev => ({
        ...prev,
        storeImage: file
      }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    
    try {
      // 调用服务创建商家
      await businessService.createBusiness(formData);
      
      // 导航到成功页面
      navigate('/submit-result', { state: { success: true } });
    } catch (error) {
      console.error('Error submitting business application:', error);
      // 导航到失败页面
      navigate('/submit-result', { state: { success: false } });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Container maxWidth="md" className="businessRegisterContainer">
      <Paper elevation={3} className="businessRegisterPaper">
        <div className="headerSection">
          <IconButton onClick={() => navigate(-1)} className="backButton">
            <ArrowBack />
          </IconButton>
          <Typography variant="h4" component="h1" className="pageTitle">
            Business Registration
          </Typography>
        </div>

        <form onSubmit={handleSubmit}>
          {/* Store Information Section */}
          <Typography variant="h6" className="sectionTitle">
            Store Information
          </Typography>
          
          <div className="formSection">
            <TextField
              required
              fullWidth
              label="Store Name"
              name="storeName"
              value={formData.storeName}
              onChange={handleInputChange}
              margin="normal"
              disabled={loading}
            />

            <TextField
              required
              fullWidth
              select
              label="Store Type"
              name="storeType"
              value={formData.storeType}
              onChange={handleInputChange}
              margin="normal"
              disabled={loading}
            >
              {storeTypes.map((option) => (
                <MenuItem key={option} value={option}>
                  {option}
                </MenuItem>
              ))}
            </TextField>

            <TextField
              required
              fullWidth
              label="Store Phone"
              name="storePhone"
              value={formData.storePhone}
              onChange={handleInputChange}
              margin="normal"
              disabled={loading}
            />

            <TextField
              required
              fullWidth
              label="Store Address"
              name="storeAddress"
              value={formData.storeAddress}
              onChange={handleInputChange}
              margin="normal"
              multiline
              rows={2}
              disabled={loading}
            />

            <TextField
              required
              fullWidth
              label="Business Hours"
              name="businessHours"
              value={formData.businessHours}
              onChange={handleInputChange}
              margin="normal"
              placeholder="e.g. Mon-Fri 9:00-18:00"
              disabled={loading}
            />

            <Box className="imageUploadSection">
              <Typography variant="subtitle1" className="imageUploadLabel">
                Store Images *
              </Typography>
              <Button
                variant="outlined"
                component="label"
                startIcon={<CloudUpload />}
                className="uploadButton"
                disabled={loading}
              >
                Upload Image
                <input
                  type="file"
                  hidden
                  accept="image/*"
                  onChange={handleImageChange}
                  disabled={loading}
                />
              </Button>
              {formData.storeImage && (
                <Typography variant="body2" className="fileName">
                  {formData.storeImage.name}
                </Typography>
              )}
            </Box>
          </div>

          {/* Applicant Information Section */}
          <Typography variant="h6" className="sectionTitle">
            Applicant Information
          </Typography>
          
          <div className="formSection">
            <TextField
              required
              fullWidth
              label="Applicant Name"
              name="applicantName"
              value={formData.applicantName}
              onChange={handleInputChange}
              margin="normal"
              disabled={loading}
            />

            <TextField
              required
              fullWidth
              label="Email"
              name="applicantEmail"
              type="email"
              value={formData.applicantEmail}
              onChange={handleInputChange}
              margin="normal"
              disabled={loading}
            />
          </div>

          <Button
            type="submit"
            variant="contained"
            color="primary"
            fullWidth
            className="submitButton"
            disabled={loading}
          >
            {loading ? (
              <CircularProgress size={24} color="inherit" />
            ) : (
              'Submit Application'
            )}
          </Button>
        </form>
      </Paper>
    </Container>
  );
} 